<template>
  <div>
    <div class="boss" @click="fun()">
      <div class="box" v-for="(v,i) in data" :key="i">
        <img :src="v.img1" alt="" />
        <p><span>{{v.text1}}</span><span>{{v.text2}}</span></p>
        <div class="text">{{v.text3|xiaoming}}</div>
        <div class="bottom">
          <div class="bottom-left">
            <img :src="v.img2" alt="" />
            <p>{{v.p}}</p>
          </div>
          <div class="bottom-right">
            <img src="/find/16.png" alt="" />
            <p>{{v.num}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods:{
fun(){
  this.$router.push("/getfind")
}
  },
  data() {
    return {
      data: [
        {
          img1: "/find/14.png",
          text1: "影之刃3",
          text2: "★5.3",
          text3:
            "【橙贴】仁王联动华服预览，琼华凤舞UP，悬赏传说刻印复刻，鸣沙令狂欢福利以及相关活动说明！（内含礼包码）",
          p: "工具者5号",
          num: "48",
          img2: "/find/15.png",
        },
        {
          img1: "/find/17.png",
          text1: " 以闪亮之名 ",
          text2: "★8.0",
          text3:
            " 视频鉴赏丨实机演示，解锁你的千万种可能（有奖活动） ",
          p: " VVANNA GIRLS ",
          num: "92",
          img2: "/find/18.png",
        },
        {
          img1: "/find/19.png",
          text1: " 王者荣耀 ",
          text2: "★5.7",
          text3:
            " 官宣！王者荣耀电竞列入20余所高校校运会正式比赛项目，2021校运王者会即将开启！ ",
          p: " 王者荣耀-妲己宝宝 ",
          num: "55",
          img2: "/find/20.png",
        },
        {
          img1: "/find/21.png",
          text1: " 英雄联盟手游 ",
          text2: "★8.3",
          text3:
            " 《英雄联盟手游》2.5版本前瞻预告 ",
          p: " 英雄联盟手游 ",
          num: "223",
          img2: "/find/22.png",
        },
      ],
    };
  },
  filters: {
    xiaoming(data) {
        if(data.length>=22){
             return data.substr(0, 22)+"...";
        }else{
            return data
        }
     
    },
  },
};
</script>

<style scoped>
.boss {
  /* width: 100%; */
  background-color: #f5f7f8;
  display: flex;
  flex-wrap: wrap;
  /* overflow-X: hidden; */
}
.box {
  width: 1.721rem;
  height: 1.9611rem;
  /* background-color: pink; */
  margin: auto;
  overflow-X: hidden;
}
.box img {
  width: 1.721rem;
  height: 0.968rem;
  display: flex;
  border-radius: 0.09rem 0.09rem 0 0;
}
.box p {
  width: 1.55rem;
  margin: auto;
  font-size: 0.1rem;
  color: #fff;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  z-index: 555;
  margin-top: -0.2rem;
}
.box .text {
  font-size: 0.14rem;
  color: #1d2127;
  margin-top: 0.15rem;
  margin-left: 0.1rem;
}
.bottom {
  width: 1.55rem;
  margin: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 0.22rem;
}
.bottom-left {
  width: 0.734rem;
  height: 0.28rem;
  /* background-color: orange; */
}
.bottom-left img {
  width: 0.16rem;
  height: 0.16rem;
  border-radius: 50%;
  margin-top: 0.04rem;
}
.bottom-left p {
  font-size: 0.1rem;
  color: #868c92;
  line-height: 0.28rem;
  margin-left: 0.2rem;
}
.bottom-right {
  width: 0.3994rem;
  height: 0.28rem;
  /* background-color: red; */
}
.bottom-right img {
  width: 0.16rem;
  height: 0.16rem;
  margin-top: 0.04rem;
}
.bottom-right p {
  color: #999;
  font-size: 0.12rem;
  line-height: 0.28rem;
  margin-left: 0.2rem;
}
</style>